<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>
        服务商系统
    </title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="./css/x-admin.css" media="all">
    <link rel="stylesheet" href="./lib/bootstrap/css/bootstrap.css" media="all">
    <link rel="stylesheet" href="./lib/bootstrap/js/bootstrap.min.js" media="all">
</head>
<body>
<style type="text/css">
    legend {
        display: block;
        width: 100px;
        border-bottom: 0px;
        font-family: "Microsoft YaHei", "Helvetica Neue";
    }

    legend a {
        color: #666;
    }

    legend a:hover {
        text-decoration: none;
    }

    .layui-table {
        font-family: "Microsoft YaHei", "Helvetica Neue";
    }
</style>
<!--<div class="x-body" style="background-image: url('images/bg-new.png');background-size: cover;height: 95vh;background-repeat: no-repeat">-->
    <!--&lt;!&ndash;<div style="height: 100%;width: 100%;background-image: url('images/bg-new.png');background-size: contain;">&ndash;&gt;-->

    <!--</div>-->
    <blockquote class="layui-elem-quote">
        欢迎使用代理商系统！<span class="f-14">
    </blockquote>
    <div class="row">
        <div class="col-xs-6 col-sm-4 col-md-3" style="margin-left: 10%">
            <section class="panel">
                <div class="symbol bgcolor-blue"><i class="fa fa-archive"></i>
                </div>
                <div class="value tab-menu" bind="1">
                    <a href="javascript:;" data-url="user-info.html" data-parent="true" data-title="商家总数"><i
                            class="iconfont " data-icon=""></i>
                        <h1 id="advertSum">0</h1>
                    </a>

                    <a href="javascript:;" data-url="user-info.html" data-parent="true" data-title="机构总数"> <i
                            class="iconfont " data-icon=""></i><span>广告金额</span></a>

                </div>
            </section>
        </div>
        <div class="col-xs-6 col-sm-4 col-md-3" style="margin-left: 10%">
            <section class="panel">
                <div class="symbol bgcolor-commred"><i class="fa fa-handshake-o"></i>
                </div>
                <div class="value tab-menu" bind="1">
                    <a href="javascript:;" data-url="user-info.html" data-parent="true" data-title="今日新增"> <i
                            class="iconfont " data-icon=""></i>
                        <h1 id="payPriceSum">0</h1>
                    </a>

                    <a href="javascript:;" data-url="user-info.html" data-parent="true" data-title="今日新增"> <i
                            class="iconfont " data-icon=""></i><span>支付流水金额</span></a>

                </div>
            </section>
        </div>

        <!--<div class="col-xs-6 col-sm-4 col-md-3">-->
            <!--<section class="panel">-->
                <!--<div class="symbol bgcolor-dark-green"><i class="fa fa-bar-chart"></i>-->
                <!--</div>-->
                <!--<div class="value tab-menu" bind="1">-->
                    <!--<a href="javascript:;" data-url="user-info.html" data-parent="true" data-title="订单总数"> <i-->
                            <!--class="iconfont " data-icon=""></i>-->
                        <!--<h1>10</h1>-->
                    <!--</a>-->
                    <!--<a href="javascript:;" data-url="user-info.html" data-parent="true" data-title="订单总数"> <i-->
                            <!--class="iconfont " data-icon=""></i><span>广告投放总数</span></a>-->
                <!--</div>-->
            <!--</section>-->
        <!--</div>-->

        <!--<div class="col-xs-6 col-sm-4 col-md-3">-->
            <!--<section class="panel">-->
                <!--<div class="symbol bgcolor-yellow-green"><i class="fa fa-cubes"></i>-->
                <!--</div>-->
                <!--<div class="value tab-menu" bind="1">-->
                    <!--<a href="javascript:;" data-url="user-info.html" data-parent="true" data-title="今日新增"> <i-->
                            <!--class="iconfont " data-icon=""></i>-->
                        <!--<h1>10</h1>-->
                    <!--</a>-->
                    <!--<a href="javascript:;" data-url="user-info.html" data-parent="true" data-title="今日新增"> <i-->
                            <!--class="iconfont " data-icon=""></i><span>今日新增投放</span></a>-->
                <!--</div>-->
            <!--</section>-->
        <!--</div>-->

    </div>


    <fieldset class="layui-elem-field layui-field-title site-title">
    <legend><a name="default">信息统计</a></legend>
    </fieldset>

    <!--相关统计-->
    <!--<div class="row">-->
    <!--<div class="col-sm-6">-->
    <!--<section class="panel">-->
    <!--<div class="panel-heading">区域统计</div>-->
    <!--<div class="panel-body">-->
    <!--<div class="echarts" id="area" style="height:300px; height:350px"></div>-->
    <!--</div>-->
    <!--</section>-->
    <!--</div>-->
    <!--<div class="col-sm-6">-->
    <section class="panel">
    <div class="panel-heading">广告</div>
    <div class="panel-body">
    <div class="echarts" id="main" style="width:80%; height:350px"></div>
    </div>
    </section>
    <!--</div>-->
    <!--<div class="col-sm-6">-->
    <!--<section class="panel">-->
    <!--<div class="panel-heading">年度统计</div>-->
    <!--<div class="panel-body">-->
    <!--<div class="echarts" id="years" style="height:300px; height:350px"></div>-->
    <!--</div>-->
    <!--</section>-->
    <!--</div>-->
    <!--<div class="col-sm-6">-->
    <!--<section class="panel">-->
    <!--<div class="panel-heading">产品统计</div>-->
    <!--<div class="panel-body">-->
    <!--<div class="echarts" id="product" style="height:300px; height:350px"></div>-->
    <!--</div>-->
    <!--</section>-->
    <!--</div>-->
</div>

<script src="./lib/layui/layui.js" charset="utf-8"></script>
<script src="./js/echarts.min.js"></script>
<script src="js/jquery.min.js"></script>
<script type="text/javascript">

    $(function () {
       statistics();
    });

    var sumPayPrices = new Array();
    var sumRedEnvelopeAmounts = new Array();
    function statistics() {

        $.ajax({
            type:"post",
            url:"/statistics",
            // data:params,
            dataType:"json" ,
            success :function (data) {

                if(data.code == 1 && data.code != undefined){
                    $("#advertSum").html(data.sumRedEnvelopeAmount / 100);
                    $("#payPriceSum").html(data.sumPayPrice / 100);
                    sumPayPrices = data.sumPayPrices;
                    sumRedEnvelopeAmounts = data.sumRedEnvelopeAmounts;
                    // 基于准备好的dom，初始化echarts实例
                    var myChart = echarts.init(document.getElementById('main'));

                    // 指定图表的配置项和数据
                    var option = {
                        title: {
                            text: '报表'
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data: ['广告', '订单流水']
                        },
                        toolbox: {
                            show: true,
                            feature: {
                                mark: {
                                    show: true
                                },
                                dataView: {
                                    show: true,
                                    readOnly: false
                                },
                                magicType: {
                                    show: true,
                                    type: ['line', 'bar']
                                },
                                restore: {
                                    show: true
                                },
                                saveAsImage: {
                                    show: true
                                }
                            }
                        },
                        calculable: true,
                        xAxis: {
                            data: ["一月", "二月", "三月", "四月", "五月", "六月","七月","八月","九月","十月","十一月","十二月"]
                        },
                        yAxis: [{
                            type : 'value',
                            axisLabel : {
                                formatter: '{value} 元'
                            }
                        }],
                        series: [{
                            name: '广告',
                            type: 'bar',
                            label: {
                                normal: {
                                    show: true,
                                    position: 'top'
                                }
                            },
                            data: sumRedEnvelopeAmounts,
                            itemStyle:{
                                normal:{color:'green',show: true,
                                    position: 'top'}

                            }
                        },
                            {
                                name: '订单流水',
                                type: 'bar',
                                label: {
                                    normal: {
                                        show: true,
                                        position: 'top'
                                    }
                                },
                                data: sumPayPrices
                            }
                        ]
                    };


                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);
                }else if(data == 9999 && data != undefined){
                    window.location.href = "/login_toLogin";
                }else if(data == 1111 && data != undefined){
                    window.location.href = "/login_toLogin";
                }else if(data.code == 2 && data.code != undefined){

                }else if(data.code == 3 && data.code != undefined){

                }
            }
        });
    }

</script>
<script type="text/javascript">
    // 指定图表的配置项和数据
    var myChart = echarts.init(document.getElementById('area'));

    // 指定图表的配置项和数据
    var option = {
        title: {
            text: '地区订单统计',
            subtext: '纯属虚构',
            x: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            data: ['广州', '佛山', '东莞', '中山', '深圳']
        },
        series: [{
            name: '地区会员数量',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: [
                {value: 6335, name: '广州'},
                {value: 4310, name: '佛山'},
                {value: 2310, name: '东莞'},
                {value: 3310, name: '中山'},
                {value: 9310, name: '深圳'}
            ],
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('years'));

    // 指定图表的配置项和数据
    var option = {
        title: {
            text: '年度订单统计',
            subtext: '纯属虚构',
            x: 'center'
        },
        color: ['#3398DB'],
        tooltip: {
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
                type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [{
            type: 'category',
            data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
            axisTick: {
                alignWithLabel: true
            }
        }],
        yAxis: [{
            type: 'value'
        }],
        series: [{
            name: '活跃度',
            type: 'bar',
            barWidth: '60%',
            data: [10, 52, 200, 334, 390, 330, 220, 200, 334, 390, 330, 220]
        }]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('product'));

    // 指定图表的配置项和数据
    var option = {
        title: {
            text: '产品订单比例',
            subtext: '纯属虚构',
            x: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            data: ['车贷', '房贷']
        },
        series: [{
            name: '访问来源',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: [
                {value: 1335, name: '车贷'},
                {value: 310, name: '房贷'}
            ],
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }]
    };


    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>

</div>
<!--<div class="layui-footer footer footer-demo">-->
    <!--<div class="layui-main">-->
        <!--<p>-->
            <!--<a href="/">-->
                <!--Copyright ©2017 17sucai.com All Rights Reserved.-->
            <!--</a>-->
        <!--</p>-->

    <!--</div>-->
<!--</div>-->

</body>
</html>